<template>
  <view v-if="visible" class="sidebar-modal" @tap="onMaskClick">
    <view class="modal-content" @tap.stop>
      <view class="modal-body">
        <text class="modal-text">{{ modalText }}</text>
      </view>
      
      <view class="modal-footer">
        <view class="modal-btn cancel-btn" @tap="onClose">取消</view>
        <view class="modal-btn confirm-btn" @tap="onCopy">复制到剪贴板</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';
import sheep from '@/sheep';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  item: {
    type: Object,
    default: () => null
  }
});

const emit = defineEmits(['close']);

// 计算显示的文本内容
const modalText = computed(() => {
  if (!props.item) return '';
  
  // 根据不同的内容类型显示不同的文本
  if (props.item.title === '联系客服' && props.item.content === '客服电话') {
    return '可在手机端拨打 4008625700';
  } else if (props.item.title === '在线咨询' && props.item.content === '客服微信') {
    return '可添加微信客服进行咨询';
  }
  
  return props.item.content || props.item.title || '';
});

const onClose = () => {
  emit('close');
};

const onMaskClick = () => {
  emit('close');
};

const onCopy = () => {
  let copyText = '';
  
  if (props.item?.title === '联系客服') {
    copyText = '4008625700';
  } else if (props.item?.title === '在线咨询') {
    copyText = '客服微信';
  } else {
    copyText = props.item?.content || '';
  }
  
  // 复制到剪贴板
  uni.setClipboardData({
    data: copyText,
    success: () => {
      uni.showToast({
        title: '复制成功',
        icon: 'success',
        duration: 2000
      });
      emit('close');
    },
    fail: () => {
      uni.showToast({
        title: '复制失败',
        icon: 'none',
        duration: 2000
      });
    }
  });
};
</script>

<style lang="scss" scoped>
.sidebar-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;

  .modal-content {
    background: #ffffff;
    border-radius: 32rpx;
    width: 100%;
    max-width: 540rpx;
    overflow: hidden;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
    min-height: 300rpx;

    .modal-body {
      padding: 60rpx 32rpx 40rpx 32rpx;
      text-align: center;

      .modal-text {
        font-size: 32rpx;
        color: #333333;
        line-height: 1.5;
        display: block;
        margin-bottom: 40rpx;
      }
    }

    .modal-footer {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 32rpx 40rpx 32rpx;
      gap: 24rpx;

      .modal-btn {
        width: 200rpx;
        height: 88rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        outline: none;
        border-radius: 12rpx;

        &.cancel-btn {
          background: #f5f5f5;
          color: #333333;

          &:active {
            background: #e8e8e8;
          }
        }

        &.confirm-btn {
          background: #07c160;
          color: #ffffff;

          &:active {
            background: #06ad56;
          }
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 750rpx) {
  .sidebar-modal {
    padding: 20rpx;

    .modal-content {
      min-height: 280rpx;
      border-radius: 28rpx;
      max-width: 460rpx;

      .modal-body {
        padding: 50rpx 24rpx 30rpx 24rpx;

        .modal-text {
          font-size: 28rpx;
          margin-bottom: 30rpx;
        }
      }

      .modal-footer {
        padding: 0 24rpx 30rpx 24rpx;
        gap: 20rpx;

        .modal-btn {
          width: 180rpx;
          height: 80rpx;
          font-size: 28rpx;
          border-radius: 10rpx;
        }
      }
    }
  }
}
</style>
